<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>资料管理</el-breadcrumb-item>
            <el-breadcrumb-item>账号管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form :model="formData" ref="_selectfrom">
            <el-row :gutter="5">
                <el-col :span="3">
                    <el-input placeholder="名称" v-model="formData.AccountName"></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button icon="el-icon-search" @click="doFormdata"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="padding: 10px 0px">
            <el-col>
                <el-button-group>
                    <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="onOperData({},'dels')">
                        批量删除
                    </el-button>
                    <el-button class="buttongroup" type="success" icon="el-icon-circle-plus-outline"
                               @click="onOperData({},'add')">添加
                    </el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" border stripe style="width: 100%" @selection-change="SelectionChange_event">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center"
                                     :index="indexMethod"></el-table-column>
                    <el-table-column fixed prop="AccountName" label="名称" align="center" show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column fixed prop="Theurl" label="网址" align="center"
                                     show-overflow-tooltip></el-table-column>
                    <el-table-column fixed prop="Account" label="账号" align="center"
                                     show-overflow-tooltip></el-table-column>
                    <el-table-column fixed prop="UserId" label="归属人" align="center" show-overflow-tooltip>
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.UserId) }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed prop="StartDate" label="开始时间" align="center" show-overflow-tooltip>
                        <template slot-scope="slot">
                            {{ doFormatDate(slot.row.StartDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed prop="EndDate" label="到期时间" align="center" show-overflow-tooltip>
                        <template slot-scope="slot">
                            {{ doFormatDate(slot.row.EndDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed prop="IsRemind" label="是否开启提醒" align="center" show-overflow-tooltip>
                        <template slot-scope="slot">
                            <el-switch
                                    @change="doWwitchChange(slot.row)"
                                    v-model="slot.row.IsRemind"
                                    active-text="是"
                                    inactive-text="否">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="300">
                        <template slot-scope="scope">
                            <el-button plain type="success" size="mini" @click="onOperData(scope.row,'set')">编辑
                            </el-button>
                            <el-button plain type="success" size="mini" @click="onOperData(scope.row,'password')">查看密码
                            </el-button>
                            <el-button plain type="danger" size="mini" @click="onOperData(scope.row,'del')">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="doFormdata"
                            @current-change="doFormdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="operData.show" :title="operData.title" v-if="operData.show" width="1000px">
            <div v-show="operData.key === 'add' || operData.key === 'set'">
                <el-form :model="operData.data" ref="OperData_refs" :inline="true" label-width="90px"
                         label-position="left" :rules="rules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="名称" prop="AccountName">
                                <el-input style="width: 350px" v-model="operData.data.AccountName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="网址" prop="Theurl">
                                <el-input style="width: 350px" v-model="operData.data.Theurl"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="账号" prop="Account">
                                <el-input style="width: 350px" v-model="operData.data.Account"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="密码" prop="PassWord">
                                <el-input style="width: 350px" type="password" :show-password="true"
                                          v-model="operData.data.PassWord"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="归属人" prop="UserId">
                                <el-select style="width: 350px" placeholder="请选择" filterable
                                           v-model="operData.data.UserId">
                                    <el-option disable label="请选择" :value="0"></el-option>
                                    <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!==8"
                                               :label="v.UserName" :value="v.Id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开始时间" prop="StartDate">
                                <el-date-picker style="width: 350px"
                                        v-model="operData.data.StartDate"
                                        type="datetime"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="到期时间" prop="EndDate">
                                <el-date-picker style="width: 350px"
                                        v-model="operData.data.EndDate"
                                        type="datetime"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开启提醒" prop="IsRemind">
                                <el-switch
                                        v-model="operData.data.IsRemind"
                                        active-text="是"
                                        inactive-text="否">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="">
                                <el-button type="success" @click="onToPost">提交</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div v-if="operData.key === 'password'">
                <el-form :model="operData.data" ref="OperData_refs" :inline="true" label-width="90px"
                         label-position="left" :rules="{
                             Password: [
                                {required: true, message: '请输入密码', trigger: 'change'},
                            ]}">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="网址" prop="Account">
                                <el-input style="width: 200px" :disabled="true" v-model="operData.data.Theurl"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="网站账号" prop="Account">
                                <el-input style="width: 200px" :disabled="true" v-model="operData.data.Account"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="网站密码" prop="PassWord">
                                <el-input style="width: 200px" :disabled="true" v-model="operData.data.PassWord"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="OA账号" prop="Account">
                                <el-select placeholder="请选择" filterable :disabled="true"
                                           v-model="operData.data.UserId" style="width: 350px">
                                    <el-option disable label="请选择" :value="0"></el-option>
                                    <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!==8"
                                               :label="v.UserName" :value="v.Id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="OA密码" prop="Password">
                                <el-input style="width: 350px" v-model="operData.data.Password"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" style="text-align: center">
                            <el-form-item label="">
                                <el-button type="success" @click="onToPost">提交</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import * as publicjs from "../../../public/Scriput/Public";

    export default {
        name: "WebsiteAccount",
        data() {
            return {
                tableData: [],
                formData: {
                    AccountName: ""
                },
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 0
                },
                operData: {
                    show: false,
                    data: {},
                    title: "",
                    key: "",
                },
                rules: {
                    AccountName: [
                        {required: true, message: '请输入名称', trigger: 'change'},
                    ],
                    Theurl: [
                        {required: true, message: '请输入网址', trigger: 'change'},
                    ],
                    Account: [
                        {required: true, message: '请输入账号', trigger: 'change'},
                    ],
                    PassWord: [
                        {required: true, message: '请输入密码', trigger: 'change'},
                    ],
                    UserId: [
                        {required: true, message: '请选择归属人', trigger: 'change'},
                    ],
                    EndDate: [
                        {required: true, message: '请选择到期时间', trigger: 'change'},
                    ],
                },
            }
        },
        mounted() {
            this.doFormdata();
        },
        methods: {
            doFormdata() {
                this.SelectMore_lis = [];
                let loadding = this.openLoading();
                this.$http.post('AccountManagement/GetAccountManagementDetail', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    key: this.formData.AccountName
                }).then(res => {
                    loadding.close();
                    this.pagination.total = res.data.PageCount
                    this.tableData = res.data.Data;
                }).catch(() => {
                    loadding.close();
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            // 数据操作
            onOperData(row, key) {
                // 添加
                if (key === "add") {
                    this.operData = {
                        data: {
                            "AccountName": "",
                            "Theurl": "",
                            "Account": "",
                            "PassWord": "",
                            "UserId": 0,
                            "StartDate": "",
                            "EndDate": "",
                            "IsRemind": false,
                        },
                        key: 'add',
                        show: true,
                        title: "添加"
                    }
                }
                // 修改
                else if (key === "set") {
                    if (row.UserId === this.$store.state.user.id) {
                        let loadding = this.openLoading();
                        this.$http.post('AccountManagement/IsPowerAccountManagement', [row.UserId]).then(res => {
                            loadding.close();
                            if (res.data.Status) {
                                this.$http.post('AccountManagement/AccountManagementById', {Id: row.Id}).then(res1 => {
                                    if (res1.data.Status) {
                                        this.operData = {
                                            data: res1.data.Data,
                                            key: 'set',
                                            show: true,
                                            title: "修改名称为：" + row.AccountName
                                        }
                                    } else {
                                        this.$message.error(res1.data.Message)
                                    }
                                }).catch(() => {
                                    this.$message.error('服务器异常,请联系管理员!')
                                })
                            } else {
                                this.$message.error(res.data.Message)
                            }
                        }).catch(() => {
                            loadding.close();
                            this.$message.error('服务器异常,请联系管理员!')
                        })
                    } else {
                        this.$message.error('请使用归属人账号！')
                    }
                }
                // 删除
                else if (key === "del") {
                    if (row.UserId === this.$store.state.user.id) {
                        let loadding = this.openLoading();
                        this.$http.post('AccountManagement/IsPowerAccountManagement', [row.UserId]).then(res => {
                            loadding.close();
                            if (res.data.Status) {
                                this.$confirm('你确定要删除吗?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'error'
                                }).then(() => {
                                    this.operData = {
                                        data: row,
                                        key: 'del',
                                        show: false,
                                        title: ""
                                    }
                                    this.onToPost();
                                })
                            } else {
                                this.$message.error(res.data.Message)
                            }
                        }).catch(() => {
                            loadding.close();
                            this.$message.error('服务器异常,请联系管理员!')
                        })
                    } else {
                        this.$message.error('请使用归属人账号！')
                    }
                }
                // 批量删除
                else if (key === "dels") {
                    if (!this.SelectMore_lis.length) {
                        this.$message.warning('请选择进行操作的数据！');
                        return;
                    }
                    let UserId = [], Id = [];
                    for (let i = 0; i < this.SelectMore_lis.length; i++) {
                        if (this.SelectMore_lis[i].UserId !== this.$store.state.user.id) {
                            this.$message.error('请使用归属人账号！');
                            return;
                        }
                        Id.push(this.SelectMore_lis[i].Id)
                        if (UserId.indexOf(this.SelectMore_lis[i].UserId) < 0) {
                            UserId.push(this.SelectMore_lis[i].UserId)
                        }
                    }
                    let loadding = this.openLoading();
                    this.$http.post('AccountManagement/IsPowerAccountManagement', UserId).then(res => {
                        loadding.close();
                        if (res.data.Status) {
                            this.$confirm('你确定要删除吗?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'error'
                            }).then(() => {
                                this.operData = {
                                    data: Id,
                                    key: 'dels',
                                    show: false,
                                    title: ""
                                }
                                this.onToPost();
                            })
                        } else {
                            this.$message.error(res.data.Message)
                        }
                    }).catch(() => {
                        loadding.close();
                        this.$message.error('服务器异常,请联系管理员!')
                    })
                }
                // 查看密码
                else if (key === "password") {
                    this.operData = {
                        show: true,
                        data: {
                            Theurl: row.Theurl,
                            Account: row.Account,
                            PassWord: "",
                            AccountId: row.Id,
                            UserId: row.UserId,
                            Password: "",
                        },
                        key: "password",
                        title: "查看密码"
                    }
                }
            },
            doWwitchChange(row) {
                console.log(row)
                this.$confirm('你确定要修改开启提醒吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.operData = {
                        data: row,
                        key: 'setIsRemind',
                        show: false,
                        title: ""
                    }
                    this.onToPost();
                }).catch(() => {
                    for (let i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].Id === row.Id) {
                            this.tableData[i].IsRemind = !row.IsRemind;
                            break;
                        }
                    }
                })
            },
            // 确定操作请求服务器
            onToPost() {
                let url = "", data = {}, isVali = true;
                // 添加
                if (this.operData.key === "add") {
                    this.$refs['OperData_refs'].validate(vali => {
                        if (vali) {
                            url = "AccountManagement/AddAccountManagementContent";
                            data = this.operData.data;
                        } else {
                            isVali = false;
                        }
                    })
                }
                // 修改
                else if (this.operData.key === "set") {
                    this.$refs['OperData_refs'].validate(vali => {
                        if (vali) {
                            url = "AccountManagement/UpdateAccountManagementContent";
                            data = this.operData.data;
                        } else {
                            isVali = false;
                        }
                    })
                }
                // 修改开启提醒
                else if (this.operData.key === "setIsRemind") {
                    url = "AccountManagement/UpdateAccountManagementContent";
                    data = this.operData.data;
                }
                // 删除单个
                else if (this.operData.key === "del") {
                    url = "AccountManagement/DeleteAccountManagementContent";
                    data = [this.operData.data.Id]
                }
                // 删除多个
                else if (this.operData.key === "dels") {
                    data = this.operData.data;
                    url = "AccountManagement/DeleteAccountManagementContent";
                }
                // 查看密码
                else if (this.operData.key === "password") {
                    this.$refs['OperData_refs'].validate(vali => {
                        if (vali) {
                            url = "AccountManagement/AccountManagementByCheck";
                            data = this.operData.data;
                        } else {
                            isVali = false;
                        }
                    })
                }
                if (isVali) {
                    let loadding = this.openLoading();
                    this.$http.post(url, data).then(res => {
                        if (res.data.Status) {
                            this.$message.success(res.data.Message);
                            if (this.operData.key !== "password") {
                                this.doFormdata();
                                this.operData = {
                                    data: {},
                                    show: false,
                                    key: "",
                                    title: ""
                                }
                            }else{
                                this.operData.data.PassWord = res.data.Data.PassWord
                            }
                            loadding.close();
                        } else {
                            loadding.close();
                            this.$message.error(res.data.Message)
                        }
                    }).catch(() => {
                        loadding.close();
                        this.$message.error('服务器异常,请联系管理员!')
                    })
                }
            },
            //获取对应人员名字
            GetUserName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == value) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            // 时间格式化
            doFormatDate(time) {
                return publicjs.formatDate(new Date(time), "yyyy-MM-dd hh:mm:ss")
            },
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
        }
    }
</script>

<style scoped>

</style>